import Markdown from 'markdown-to-jsx'
import { memo, ReactNode } from 'react';
import { CodeBlock } from './CodeBlock';

// 定义组件 props 接口
interface CustomTableProps {
    children: ReactNode;
}

interface CustomTdProps {
    children: ReactNode;
}

interface CustomHeadingProps {
    children: ReactNode;
}

interface CustomListProps {
    children: ReactNode;
    [key: string]: any;
}

interface CustomListItemProps {
    children: ReactNode;
    [key: string]: any;
}

interface CustomImageProps {
    src?: string;
    alt?: string;
    [key: string]: any;
}

interface CustomLinkProps {
    children: ReactNode;
    href?: string;
    [key: string]: any;
}

interface CustomParagraphProps {
    children: ReactNode;
    [key: string]: any;
}

// 定义带边框样式的表格组件
const CustomTable = ({ children }: CustomTableProps) => (
    <table style={{ border: "1px solid #D9D9D9", borderCollapse: "collapse", width: "100%" }}>
        {children}
    </table>
);

// 定义带边框样式的表格单元格组件
const CustomTd = ({ children }: CustomTdProps) => (
    <td style={{ border: "1px solid #D9D9D9", padding: "8px" }}>{children}</td>
);

// 自定义样式的标题组件
const CustomH1 = ({ children }: CustomHeadingProps) => (
    <h1 style={{ fontWeight: "bold", fontSize: 26 }}>
        {children}
    </h1>
);

const CustomH2 = ({ children }: CustomHeadingProps) => (
    <h2 style={{ fontWeight: "bold", fontSize: 22 }}>
        {children}
    </h2>
);

const CustomH3 = ({ children }: CustomHeadingProps) => (
    <h3 style={{ fontWeight: "bold", fontSize: 18 }}>
        {children}
    </h3>
);

// 添加自定义的有序列表组件
const CustomOrderedList = ({ children, ...props }: CustomListProps) => (
    <ol style={{
        listStyleType: 'decimal',
        paddingLeft: '20px',
        margin: '10px 0'
    }} {...props}>
        {children}
    </ol>
);

// 无序列表组件 (圆点)
const CustomUnorderedList = ({ children, ...props }: CustomListProps) => (
    <ul style={{
        listStyleType: 'disc', // 圆点样式
        paddingLeft: '20px',
        margin: '10px 0'
    }} {...props}>
        {children}
    </ul>
);

// 添加自定义的列表项组件
const CustomListItem = ({ children, ...props }: CustomListItemProps) => (
    <li style={{
        margin: '5px 0'
    }} {...props}>
        {children}
    </li>
);

// 添加自定义的图片组件
const CustomImage = ({ src, alt, ...props }: CustomImageProps) => (
    <img
        src={src}
        alt={alt}
        style={{
            margin: '10px 0',    // 设置图片与其他元素的间距
            borderRadius: '8px', // 设置圆角大小
            maxWidth: '100%',    // 确保图片不会超出容器
            height: 'auto'       // 保持图片比例
        }}
        {...props}
    />
);

// 添加自定义的链接组件
const CustomLink = ({ children, href, ...props }: CustomLinkProps) => (
    <a 
        href={href}
        style={{
            color: '#1890ff',
            fontWeight: 'bold',
            textDecoration: 'none'
        }}
        target="_blank"
        rel="noopener noreferrer"
        {...props}
    >
        {children}
    </a>
);

const CustomParagraph = ({ children, ...props }: CustomParagraphProps) => (
    <p style={{
        lineHeight: '1.6'
    }} {...props}>
        {children}
    </p>
);

interface Props {
    markdown: string;
}

const MarkdownRender = (props: Props) => {
    const { markdown } = props

    return (
        <Markdown options={{
            overrides: {
                table: {
                    component: CustomTable,
                },
                td: {
                    component: CustomTd,
                },
                th: {
                    component: CustomTd, // 表头也可以使用自定义样式
                },
                h1: {
                    component: CustomH1,
                },
                h2: {
                    component: CustomH2,
                },
                h3: {
                    component: CustomH3,
                },
                ol: {
                    component: CustomOrderedList,
                },
                ul: {
                    component: CustomUnorderedList
                },
                p: {
                    component: CustomParagraph,
                },
                li: {
                    component: CustomListItem,
                },
                img: {
                    component: CustomImage,
                },
                a: {
                    component: CustomLink,
                },
                code: {
                    component: CodeBlock,
                },
            },
        }}>{markdown}</Markdown>
    )
}

export default memo(MarkdownRender)
